<!DOCTYPE html >
<html>
<head>
    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
    
    <script src="../libraries/RGraph.common.core.js" ></script>
    <script src="../libraries/RGraph.common.effects.js" ></script>
    <script src="../libraries/RGraph.pie.js" ></script>
    <script src="../libraries/RGraph.bar.js" ></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->
    
    <title>A Bar chart with animated Pie chart</title>
    
    <meta name="description" content="A Bar chart with an animated Pie chart" />
    
</head>
<body>

    <h1>A Bar chart with animated Pie chart</h1>
    
    <p>
        This demo shows a simple effect using the Pie chart RoundRobin effect.
    </p>

    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
    
    <script>
        $(document).ready(function ()
        {
            var bar = new RGraph.Bar({
                id: 'cvs',
                data: [5,4,5,6,8,5,3],
                options: {
                    gutter: {
                        bottom: 40
                    },
                    labels: ['Monday','\r\nTuesday','Wednesday','\r\nThursday','Friday','\r\nSaturday','Sunday'],
                    strokestyle: 'rgba(0,0,0,0)'
                }
            }).draw();
            
            var pie = new RGraph.Pie({
                id: 'cvs',
                data: [4,8,6],
                options: {
                    centerx: 60,
                    centery: 60,
                    radius: 25,
                    exploded: [5],
                    strokestyle: 'rgba(0,0,0,0)',
                    shadow: true,
                    strokestyle: '#fff',
                    linewidth: 1
                }
            }).roundRobin({frames: 30, radius: false})
        })
    </script>

    <p>
        <a href="./">&laquo; Back</a>
    </p>

</body>
</html>